import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from '@/common/layer';
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import jquery from 'jquery';
import jquerydate from '@/common/jquerydate'
import Sel1View from '@/components/sel1'
import RadioPicker2 from '@/components/RadioPicker2'
import RadioPicker1 from '@/components/RadioPicker1'
import Picker from '@/components/picker'

class Defbbus extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loantypetit: '贷款类型',
            loantypeselGroups: [{ value: 0, label: '房贷' }, { value: 1, label: '车贷' }, { value: 2, label: '信用贷' }, { value: 3, label: '保单贷' }, { value: 4, label: '公积金贷' }],
            loantypesel: -1,
            loantypesellLabel: '点击选择',
            loantypeselShow: false,
            protit: '申请产品',
            professionalGroups: [],
            professional: 0,
            professionalLabel: '点击选择',
            professionalShow: false,
            prolist: [],
            prolist1: [],
            prolist2: [],
            endid: '',
            endreason: '',
            remark: ['', '', '中止原因', '取消原因', '放款备注'],

        }
    }

    componentDidMount() {
        this.feedback(3)
        var that = this
        jquery("li").eq(0).find("span").addClass("active")
        jquery("li").on("click", function () {
            jquery(this).find("span").addClass("active");
            jquery(this).siblings().find("span").removeClass("active");
            that.feedback(jquery(this).data("id"))
            if (jquery(this).data("id") == 3) {
                jquery('.oneMonth').show().siblings().hide()
            } else if (jquery(this).data("id") == 4) {
                jquery('.thirdMonth').show().siblings().hide()
            } else {
                jquery('.end').show().siblings().hide()
            }
        })
    }

    async feedback(i) {
        let sendobj = {
            // salePhone: localStorage.getItem("salephone"),
            queryStatus: i
        }
        let res = await util.rjax({
            url: '/otherProductStatus/getList',
            type: "post",
            data: sendobj
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            if (i == 3) {
                this.setState({ prolist: res.data.rows })
            } else if (i == 4) {
                this.setState({ prolist1: res.data.rows })
            } else {
                this.setState({ prolist2: res.data.rows })
            }
        }
    }

    async godetail(e) {
        window.location.href = `./delookdoc.html?id=` + e.target.id + "&apply=" + e.target.getAttribute("apply");
    }

    async goedit(e) {
        window.location.href = `./deprogedit.html?id=` + e.target.id + "&apply=" + e.target.getAttribute("apply");
    }


    // 中止订单
    async gocancel(e) {
        jquery(".dialogcancel").show()
        this.setState({ endid: e.target.id })
    }

    async cancel() {
        let res = await util.rjax({
            url: '/otherProductStatus/end?id=' + this.state.endid + "&endReason=" + jquery("textarea").val(),
            type: "post"
        })
        if (res) {
            this.setState({ endid: '' })
            this.feedback(3)
        }
    }

    async cancelyes() {
        var text = jquery("textarea").val()
        if (jquery("textarea").val() == '') {
            layer.open({
                content: "取消原因不能为空",
                btn: "好的"
            })
        } else {
            this.cancel()
            jquery(".dialogcancel").hide()
        }
    }

    async cancelno() {
        jquery(".dialogcancel").hide()
        this.setState({ endid: '' })
    }


    render() {
        let prolist = this.state.prolist.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                        <p className="detail" onClick={this.godetail.bind(this)} apply={item.apply} id={item.id}>查看进件材料</p>
                    </div>
                    <p className="dobblebtn">
                        <span className="cancelbtn" id={item.id} onClick={this.gocancel.bind(this)}>中止报单</span>
                        <span className="editbtn" id={item.id} apply={item.apply} onClick={this.goedit.bind(this)}>处理报单</span>
                    </p>
                </div>
            )
        })

        let prolist1 = this.state.prolist1.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l proid" id="2222"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                        <p className="detail" onClick={this.godetail.bind(this)} apply={item.apply} id={item.id}>查看进件材料</p>
                    </div>
                    <p className="editdoc" onClick={this.goedit.bind(this)} apply={item.apply} id={item.id}>前往处理进度<span className="rotate"><img className="pullimg" src="/assets/wechat/right.png" alt="" /></span></p>
                </div>
            )
        })

        let prolist2 = this.state.prolist2.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l proid" id="2222"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                    </div>
                    <h4 className="rejecttit">{this.state.remark[item.status]}</h4>
                    <p className="rejectreason" style={{display:item.status==4?'block':'none'}}>{item.sixthRemark}</p>
                    <p className="rejectreason" style={{display:item.status==3?'block':'none'}}>{item.saleReason}</p>
                    <p className="rejectreason" style={{display:item.status==2?'block':'none'}}>{item.endReason}</p>
                </div>

            )
        })

        return (
            <div className="feedback">
                <div className="tab">
                    <ul>
                        <li data-id="3"><span>新报单</span></li>
                        <li data-id="4"><span>处理中</span></li>
                        <li data-id="5"><span>历史报单</span></li>
                    </ul>
                </div>
                <div>
                    <div className="oneMonth">
                        {prolist}
                    </div>

                    <div className="thirdMonth" style={{ display: 'none' }}>
                        {prolist1}
                    </div>

                    <div className="end" style={{ display: 'none' }}>
                        {prolist2}
                    </div>
                </div>

                {/* 取消原因弹框 */}
                <div className="dialogcancel">
                    <div className="iscancelbox">
                        <span className="canceltip">取消原因</span>
                        <textarea maxLength="50" name="" placeholder="文字不超过50个字" id="" cols="" rows=""></textarea>
                        {/* <span><span id="textNum">0</span>/100</span> */}
                        <p>
                            <span className="yes" onClick={this.cancelno.bind(this)}>取消</span>
                            <i></i>
                            <span className="no" onClick={this.cancelyes.bind(this)}>确定</span>
                        </p>
                    </div>
                </div>
            </div>

        )
    }
}

ReactDom.render(<Defbbus />, document.getElementById("app"));